import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Divider, Badge } from 'antd';
import { withRouter } from 'umi';
import moment, { isDate } from 'moment';
import StandardTable from '@/components/StandardTable';
import AntdInput from '@/components/AntdInput';
import AdSelect from '@/components/AdSelect';
import AdModal from '@/components/AdModal';
import AntdForm from '@/components/AntdForm';
import AdButton from '@/components/AdButton';
import AntdDatePicker from '@/components/AntdDatePicker';
import FileReader from '@/components/FileReader';
import AntdSelectRegion from '@/components/AntdSelectRegion';
import SearchSelect from '@/components/SearchSelect';
import { allDictList } from '@/utils/constans';
import { queryDict, filterAddFile, filterDeteteFile, formatPrice } from '@/utils/common';
import { columnsDriver } from '@/pages/Common/common';
import { selectArchivesDetailAndInfo, allDispatchType, renderTableAdSelect, codes } from './utils';
import styles from './archives.less';
import DriverAdd from './DriverAdd';
const dateFormat = 'YYYY-MM-DD';

@connect(({ Archives, component, loading }) => ({
  dictObject: component.dictObject,
  archivesDetail: Archives.archivesDetail,
  emptyDetails: Archives.emptyDetails,
  loading: loading.effects[allDispatchType.incidentalInfo],
}))
@Form.create()
@withRouter
export default class PartsOfferInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showDriverAdd: false,
      driverAddId: '',
    };
    this.className = 'archivesDriverslInfo-table';
  }
  showDetail = (e, id) => {
    this.setState({ showDriverAdd: true, driverAddId: id });
  };
  componentWillMount() {
    const allDict = [allDictList.currencyType];
    queryDict({ props: this.props, allDict });
  }
  columns = [
    {
      title: '工号',
      dataIndex: 'workerNo',
      width: 100,
      render: (text, record) => {
        return (
          <AdButton
            mode="a"
            onClick={e => this.showDetail(e, record.id)}
            text={text}
            // code={codes.showDetail}
          />
        );
      },
    },
    {
      title: '司机',
      dataIndex: 'name',
      width: 150,
      render: text => {
        return <span title={text}>{text}</span>;
      },
    },
    {
      title: '车次数',
      dataIndex: 'trainCount',
      width: 100,
    },
    {
      title: '时效达标车次',
      width: 120,
      dataIndex: 'timeBasedCount',
    },
    {
      title: '币种',
      dataIndex: 'currencyType',
      render: text =>
        renderTableAdSelect({
          props: this.props,
          value: text || 'CNY',
          key: allDictList.currencyType,
        }),
      width: 100,
    },
    {
      title: '时效奖单价(元/次)',
      dataIndex: 'timeAwardPrice',
      width: 140,
    },
    {
      title: '时效奖金额',
      dataIndex: 'timeAward',
      width: 120,
    },
    {
      title: '行驶里程',
      dataIndex: 'travelMileage',
      width: 100,
    },
    {
      title: '行驶绩效奖',
      dataIndex: 'mileagePerformance',
      width: 120,
    },
    {
      title: '节省油量',
      dataIndex: 'saveFuel',
      width: 100,
    },
    {
      title: '油耗奖',
      width: 100,
      dataIndex: 'rewardOilFee',
    },
    {
      title: '压夜天数',
      width: 100,
      dataIndex: 'pressureDays',
    },
    {
      title: '压夜补助',
      width: 100,
      dataIndex: 'pressureAmount',
      render: text => <span>{formatPrice(text)}</span>,
    },
    {
      title: '短驳车次',
      width: 100,
      dataIndex: 'shortBargeCount',
    },
    {
      title: '短驳补助',
      width: 100,
      dataIndex: 'shortBargeSubsidies',
      render: text => <span>{formatPrice(text)}</span>,
    },
    {
      title: '节假日天数',
      width: 120,
      dataIndex: 'holidays',
    },
    {
      title: '节假日津贴(元)',
      width: 140,
      dataIndex: 'holidaySubsidies',
      render: text => <span>{formatPrice(text)}</span>,
    },
    {
      title: '总计',
      width: 100,
      dataIndex: 'totalFee',
      render: text => <span>{formatPrice(text)}</span>,
    },
  ];
  columnsHK = [
    {
      title: '工号',
      dataIndex: 'workerNo',
      width: 100,
      render: (text, record) => <span title={text}>{text}</span>,
    },
    {
      title: '司机',
      dataIndex: 'name',
      width: 150,
      render: text => {
        return <span title={text}>{text}</span>;
      },
    },
    {
      title: '是否渡柜',
      dataIndex: 'beCrossing',
      width: 100,
     render:text=>(<span>{text===true?'是':'否'}</span>)
    },
    {
      title: '渡柜补贴',
      dataIndex: 'crossAmount',
      width: 120,
    },
    {
      title: '直派费',
      dataIndex: 'straightAmount',
      width: 100,
    },
    {
      title: '加点费',
      dataIndex: 'someAmount',
      width: 100,
    },
    {
      title: '币种',
      dataIndex: 'currencyType',
      render: text =>
        renderTableAdSelect({
          props: this.props,
          value: text || 'CNY',
          key: allDictList.currencyType,
        }),
      width: 100,
    },
    {
      title: '压夜天数',
      width: 100,
      dataIndex: 'pressureDays',
    },
    {
      title: '压夜标准',
      width: 100,
      dataIndex: 'pressurePrice',
    },
    {
      title: '压夜补助',
      width: 100,
      dataIndex: 'pressureAmount',
      render: text => <span>{formatPrice(text)}</span>,
    },
    {
      title: '查验标准',
      width: 100,
      dataIndex: 'checkPrice',
      render: text => <span>{formatPrice(text)}</span>,
    },
    {
      title: '查验补贴',
      width: 100,
      dataIndex: 'checkAmount',
      render: text => <span>{formatPrice(text)}</span>,
    },
    {
      title: '提成比例',
      width: 100,
      dataIndex: 'commissionsRatio',
      render: text => <span>{text}</span>,
    },
    {
      title: '提成补贴',
      width: 100,
      dataIndex: 'commissionsAmount',
      render: text => <span>{formatPrice(text)}</span>,
    },
    {
      title: '总计',
      width: 100,
      dataIndex: 'totalFee',
      render: text => <span>{formatPrice(text)}</span>,
    },
  ];

  columnsHKEmpty = [
    {
      title: '工号',
      dataIndex: 'workerNo',
      width: 100,
      render: (text, record) => <span title={text}>{text}</span>,
    },
    {
      title: '司机',
      dataIndex: 'name',
      width: 150,
      render: text => {
        return <span title={text}>{text}</span>;
      },
    },
    {
      title: '币种',
      dataIndex: 'currencyType',
      render: text =>
        renderTableAdSelect({
          props: this.props,
          value: text || 'CNY',
          key: allDictList.currencyType,
        }),
      width: 100,
    },
    {
      title: '补贴',
      width: 100,
      dataIndex: 'emptyAmount',
      render: text => <span>{formatPrice(text)}</span>,
    },
    
    // {
    //   title: '深圳柜补贴',
    //   width: 100,
    //   dataIndex: 'cabinetAmount',
    //   render: text => <span>{formatPrice(text)}</span>,
    // },
    // {
    //   title: '夜班补贴',
    //   width: 100,
    //   dataIndex: 'nightshiftAmount',
    //   render: text => <span>{formatPrice(text)}</span>,
    // },{
    //   title: '周末开工补贴',
    //   width: 100,
    //   dataIndex: 'weekendAmount',
    //   render: text => <span>{formatPrice(text)}</span>,
    // },

    {
      title: '总计(元)',
      width: 100,
      dataIndex: 'totalFee',
      render: text => <span>{formatPrice(text)}</span>,
    },
  ];
  handleOk = () => {
    this.setState({ showDriverAdd: false });
  };
  render() {
    const { driverAddId, showDriverAdd } = this.state;
    const { loading, archivesDetail, emptyDetails, archivesId, isHK, businessType } = this.props;
    let details = {};
    if (businessType === 'EMPTY') {
      details = emptyDetails;
    } else {
      details = archivesDetail;
    }
    const driverBillList = details[archivesId] ? { list: details[archivesId].driverBillList } : {};

    return (
      <div>
        <AdModal
          visible={showDriverAdd}
          title="司机提成"
          onOk={this.handleOk}
          onCancel={() => {
            this.handleOk();
          }}
          width="80%"
          bodyStyle={{
            height: 'calc(100vh - 100px)',
            overflowY: 'auto',
            padding: '12px 12px 0 12px',
            background: '#F0F2F5',
          }}
          footer={null}
        >
          <DriverAdd id={driverAddId} archivesId={archivesId} />
        </AdModal>
        <AntdForm>
          <StandardTable
            loading={loading}
            data={driverBillList}
            columns={
              isHK
                ? businessType === 'EMPTY'
                  ? this.columnsHKEmpty
                  : this.columnsHK
                : this.columns
            }
            disabledRowSelected={true}
            pagination={false}
            scrollX={businessType === 'EMPTY' ? 500 : 1600}
            scrollY={200}
            // className={this.className}
          />
        </AntdForm>
      </div>
    );
  }
}
